<template>
  <div class="form_box">
    <from
      ref="formInline"
      label-position="right"
      :label-width="100"
      inline
      @keyup.enter.native="onSubmit"
    >
      <form-item v-for="item in items" :key="item.key" :label="item.title">
        <!-- 输入框 -->
        <el-input
          v-if="item.type === 'input'"
          v-model="params[item.key]"
          size="mini"
          type="text"
          :placeholder="item.title"
          clearable
          class="input-class"
          :maxlength="item.maxlength || undefined"
        />

        <!-- 数字输入框范围 -->
        <span v-if="item.type === 'input-number-range'">
          <el-input-number
            size="mini"
            style="width: 84px"
            :placeholder="item.startText"
            :min="0"
            :controls="false"
            @input="
              handleNumberRangeChange($event, { key: item.key, pos: 'start' })
            "
          />
          <span> - </span>
          <el-input-number
            size="mini"
            style="width: 84px"
            :placeholder="item.endText"
            :min="0"
            :controls="false"
            @input="
              handleNumberRangeChange($event, { key: item.key, pos: 'end' })
            "
          />
        </span>

        <!-- 下拉框 -->
        <el-select
          v-else-if="item.type === 'select'"
          v-model="params[item.key]"
          size="mini"
          :value="params[item.key]"
          :placeholder="item.title"
          class="input-class"
          clearable
          @change="$forceUpdate()"
        >
          <el-option
            v-for="(option, index) in item.options"
            :key="index"
            selected="selected"
            :label="option.label"
            :value="option.value"
          />
        </el-select>

        <!-- 日期范围 date-->
        <el-date-picker
          v-else-if="item.type === 'date'"
          v-model="params[item.key]"
          value-format="yyyy-MM-dd HH:mm:ss"
          size="mini"
          type="data"
          placeholder="选择日期"
          class="input-class"
        />

        <!-- 日期范围 date-range-->
        <el-date-picker
          v-else-if="item.type === 'date-range'"
          v-model="params[item.key]"
          value-format="yyyy-MM-dd HH:mm:ss"
          size="mini"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          placeholder="日期范围"
          class="input-class"
          style="width:300px"
        />

        <!-- 自定义分类 -->
        <el-cascader
          v-else-if="item.type === 'cascader'"
          ref="customCascader"
          v-model="params[item.key]"
          size="mini"
          clearable
          :options="item.options"
          :props="{
            checkStrictly: true,
            expandTrigger: 'hover',
            emitPath: false,
            value: item.key ? item.key : 'id',
            label: item.label ? item.label : 'label',
            children: item.children ? item.children : 'children',
          }"
          class="input-class"
          placeholder=""
          filterable
          @change="closeCascader"
        />

        <!-- 省市区联动 -->
        <el-cascader
          v-else-if="item.type === 'region'"
          v-model="regionSelectedOptions"
          size="mini"
          clearable
          class="input-class"
          :options="regionOptions"
          placeholder="省市区联动"
          @change="handleRegionChange($event, item.key)"
        />

        <!-- 多选框 -->
        <el-checkbox-group
          v-else-if="item.type === 'checkbox'"
          v-model="checkboxModel"
        >
          <el-checkbox
            v-for="(option, index) in item.options"
            :key="index"
            :label="option.label"
            @change="handleCheckbox(item.key)"
          />
        </el-checkbox-group>

        <!-- 单选框 -->
        <el-radio-group
          v-else-if="item.type === 'radio'"
          v-model="params[item.key]"
        >
          <el-radio
            v-for="(option, index) in item.options"
            :key="index"
            :label="option.label"
            >{{ option.label }}</el-radio
          >
        </el-radio-group>

        <!-- 远程实时搜索 -->
        <el-select
          v-else-if="item.type === 'remote-select'"
          v-model="params[item.key]"
          size="mini"
          filterable
          remote
          placeholder=""
          class="input-class"
          clearable
          :remote-method="item.remoteSearch"
          :loading="item.loading"
          @change="$forceUpdate()"
        >
          <el-option
            v-for="(option, index) in item.options"
            :key="index"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </form-item>
      <form-item>
        <el-button
          icon="el-icon-search"
          size="mini"
          type="primary"
          :loading="btnLoading"
          @click="onSubmit"
          >搜索</el-button
        >
      </form-item>
    </from>
  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
export default {
  name: "SearchForm",
  props: {
    items: {
      type: Array,
      required: true,
    },
    params: {
      type: Object,
      required: true,
    },
    onSubmit: {
      type: Function,
      required: true,
    },
    btnLoading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      regionOptions: regionData,
      regionSelectedOptions: [],
      checkboxModel: [],
    };
  },
  mounted() {
    console.log(this.items);
  },
  methods: {
    // 处理数字区间
    handleNumberRangeChange(val, obj) {
      if (!this.params[obj.key]) {
        this.params[obj.key] = {};
      }
      this.params[obj.key][obj.pos] = val;
    },
    // 处理地区选择代码转文字
    handleRegionChange(value, key) {
      this.params[key] = {
        province: value[0] ? CodeToText[value[0]] : "",
        city: value[1] ? CodeToText[value[1]] : "",
        county: value[2] ? CodeToText[value[2]] : "",
      };
    },
    // 处理多选框值
    handleCheckbox(key) {
      this.params[key] = this.checkboxModel;
    },
    // 关闭级联选框
    closeCascader() {
      this.$refs.customCascader[0].toggleDropDownVisible(false);
    },
  },
};
</script>

<style lang="less" scoped>
@font-size: 12px;
/deep/ .el-input,
.ivu-input {
  font-size: @font-size;
}
/deep/ .ivu-input {
  font-size: @font-size;
}
/deep/ .ivu-form-item-label {
  font-size: @font-size;
}
.input-class {
  font-size: @font-size;
  width: 180px;
  margin-right: 10px;
}
.el-checkbox {
  margin-right: 10px;
}
.form_box {
  margin-bottom: 20px;
}
</style>
